<template>
    <img class="card" src="cards.png" alt="" :style="{'object-position': objectPosition}">
</template>
   
<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{ rank: number, suit: number }>()

const objectPosition = computed(() => {
  return `-${(props.rank - 2) * 171.5}px -${(props.suit - 1) * 239}px`
})
</script>



<style scoped>
.card {
    width: 160px;
    height: 226px;
    padding: 0;
    object-fit: none;
}
</style>
